<h3>Destinations</h3>
<div data-bind="with: localSettings" class="panel padding">
    <div class="toggle margin-left">
        <input id="toggle-local" type="checkbox" data-bind="checked: enabled">
        <label for="toggle-local">Local</label>
    </div>
    <div data-bind="collapse: enabled">
        <div class="row margin-bottom">
            <label class="control-label col-xs-12 col-sm-6 col-lg-4"></label>
            <div class="col-xs-12 col-sm-6 col-lg-8">
                <div class="toggle">
                    <input id="localSettingsViaScript" type="checkbox" data-bind="checked: hasConfigurationScript">
                    <label for="localSettingsViaScript">Override configuration via external script</label>
                </div>
            </div>
        </div>
        <div data-bind="collapse: hasConfigurationScript">
            <div data-bind="compose: $root.backupConfigurationView"></div>
        </div>
        <div data-bind="collapse: !hasConfigurationScript()">
            <div data-bind="compose: $root.backupDestinationLocalView"></div>
        </div>
    </div>
</div>
<div data-bind="with: s3Settings" class="panel padding">
    <div class="toggle margin-left">
        <input id="toggle-amazonS3" type="checkbox" data-bind="checked: enabled">
        <label for="toggle-amazonS3">Amazon S3</label>
    </div>
    <div data-bind="collapse: enabled">
        <div>
            <div class="row">
                <label class="control-label col-xs-12 col-sm-6 col-lg-4"></label>
                <div class="col-xs-12 col-sm-6 col-lg-8">
                    <div class="toggle">
                        <input id="s3SettingsViaScript" type="checkbox" data-bind="checked: hasConfigurationScript">
                        <label for="s3SettingsViaScript">Override configuration via external script</label>
                    </div>
                </div>
            </div>
            <div class="row margin-bottom" data-bind="visible: !hasConfigurationScript()">
                <label class="control-label col-xs-12 col-sm-6 col-lg-4"></label>
                <div class="col-xs-12 col-sm-6 col-lg-8">
                    <div class="toggle">
                        <input id="s3CustomHost" type="checkbox" data-bind="checked: useCustomS3Host">
                        <label for="s3CustomHost">Use a custom S3 host</label>
                    </div>
                </div>
            </div>
            <div data-bind="collapse: hasConfigurationScript">
                <div data-bind="compose: $root.backupConfigurationView"></div>
            </div>
            <div data-bind="collapse: !hasConfigurationScript()">
                <div data-bind="compose: { model: $data }"></div>
                <div class="text-right">
                    <button data-bind="click: _.partial($root.testCredentials, $data), disable: isTestingCredentials, css: { 'btn-spinner': isTestingCredentials }" class="btn btn-info">
                        <i class="icon-rocket"></i>
                        &nbsp;&nbsp;<span>Test credentials</span>
                    </button>
                </div>
            </div>
        </div>
        <div class="panel-addon">
            <div data-bind="with: testConnectionResult">
                <div data-bind="compose: $root.backupDestinationTestCredentialsView"></div>
            </div>
        </div>
    </div>
</div>
<div data-bind="with: azureSettings" class="panel padding">
    <div class="toggle margin-left">
        <input id="toggle-azure" type="checkbox" data-bind="checked: enabled">
        <label for="toggle-azure">Azure</label>
    </div>
    <div data-bind="collapse: enabled">
        <div>
            <div class="row margin-bottom">
                <label class="control-label col-xs-12 col-sm-6 col-lg-4"></label>
                <div class="col-xs-12 col-sm-6 col-lg-8">
                    <div class="toggle">
                        <input id="azureSettingsViaScript" type="checkbox" data-bind="checked: hasConfigurationScript">
                        <label for="azureSettingsViaScript">Override configuration via external script</label>
                    </div>
                </div>
            </div>
            <div data-bind="collapse: hasConfigurationScript">
                <div data-bind="compose: $root.backupConfigurationView"></div>
            </div>
            <div data-bind="collapse: !hasConfigurationScript()">
                <div data-bind="compose: { model: $data }"></div>
                <div class="text-right">
                    <button data-bind="click: _.partial($root.testCredentials, $data), disable: isTestingCredentials, css: { 'btn-spinner': isTestingCredentials }" class="btn btn-info">
                        <i class="icon-rocket"></i>
                        &nbsp;&nbsp;<span>Test credentials</span>
                    </button>
                </div>
            </div>
        </div>
        <div class="panel-addon">
            <div data-bind="with: testConnectionResult">
                <div data-bind="compose: $root.backupDestinationTestCredentialsView"></div>
            </div>
        </div>
    </div>
</div>
<div data-bind="with: googleCloudSettings" class="panel padding">
    <div class="toggle margin-left">
        <input id="toggle-google-cloud" type="checkbox" data-bind="checked: enabled">
        <label for="toggle-google-cloud">Google Cloud</label>
    </div>
    <div data-bind="collapse: enabled">
        <div>
            <div class="row margin-bottom">
                <label class="control-label col-xs-12 col-sm-6 col-lg-4"></label>
                <div class="col-xs-12 col-sm-6 col-lg-8">
                    <div class="toggle">
                        <input id="googleSettingsViaScript" type="checkbox" data-bind="checked: hasConfigurationScript">
                        <label for="googleSettingsViaScript">Override configuration via external script</label>
                    </div>
                </div>
            </div>
            <div data-bind="collapse: hasConfigurationScript">
                <div data-bind="compose: $root.backupConfigurationView"></div>
            </div>
            <div data-bind="collapse: !hasConfigurationScript()">
                <div data-bind="compose: { model: $data }"></div>
                <div class="text-right">
                    <button data-bind="click: _.partial($root.testCredentials, $data), disable: isTestingCredentials, css: { 'btn-spinner': isTestingCredentials }" class="btn btn-info">
                        <i class="icon-rocket"></i>
                        &nbsp;&nbsp;<span>Test credentials</span>
                    </button>
                </div>
            </div>
        </div>
        <div class="panel-addon">
            <div data-bind="with: testConnectionResult">
                <div data-bind="compose: $root.backupDestinationTestCredentialsView"></div>
            </div>
        </div>
    </div>
</div>
<div data-bind="with: glacierSettings" class="panel padding">
    <div class="toggle margin-left">
        <input id="toggle-glacier" type="checkbox" data-bind="checked: enabled">
        <label for="toggle-glacier">Amazon Glacier</label>
    </div>
    <div data-bind="collapse: enabled">
        <div>
            <div class="row margin-bottom">
                <label class="control-label col-xs-12 col-sm-6 col-lg-4"></label>
                <div class="col-xs-12 col-sm-6 col-lg-8">
                    <div class="toggle">
                        <input id="glacierSettingsViaScript" type="checkbox" data-bind="checked: hasConfigurationScript">
                        <label for="glacierSettingsViaScript">Override configuration via external script</label>
                    </div>
                </div>
            </div>
            <div data-bind="collapse: hasConfigurationScript">
                <div data-bind="compose: $root.backupConfigurationView"></div>
            </div>
            <div data-bind="collapse: !hasConfigurationScript()">
                <div data-bind="compose: { model: $data }"></div>
                <div class="text-right">
                    <button data-bind="click: _.partial($root.testCredentials, $data), disable: isTestingCredentials, css: { 'btn-spinner': isTestingCredentials }" class="btn btn-info">
                        <i class="icon-rocket"></i>
                        &nbsp;&nbsp;<span>Test credentials</span>
                    </button>
                </div>
            </div>
        </div>
        <div class="panel-addon">
            <div data-bind="with: testConnectionResult">
                <div data-bind="compose: $root.backupDestinationTestCredentialsView"></div>
            </div>
        </div>
    </div>
</div>
<div data-bind="with: ftpSettings" class="panel padding">
    <div class="toggle margin-left">
        <input id="toggle-ftp" type="checkbox" data-bind="checked: enabled">
        <label for="toggle-ftp">FTP</label>
    </div>
    <div data-bind="collapse: enabled">
        <div>
            <div class="row margin-bottom">
                <label class="control-label col-xs-12 col-sm-6 col-lg-4"></label>
                <div class="col-xs-12 col-sm-6 col-lg-8">
                    <div class="toggle">
                        <input id="ftpSettingsViaScript" type="checkbox" data-bind="checked: hasConfigurationScript">
                        <label for="ftpSettingsViaScript">Override configuration via external script</label>
                    </div>
                </div>
            </div>
            <div data-bind="collapse: hasConfigurationScript">
                <div data-bind="compose: $root.backupConfigurationView"></div>
            </div>
            <div data-bind="collapse: !hasConfigurationScript()">
                <div data-bind="compose: { model: $data }"></div>
                <div class="text-right">
                    <button data-bind="click: _.partial($root.testCredentials, $data), disable: isTestingCredentials, css: { 'btn-spinner': isTestingCredentials }" class="btn btn-info">
                        <i class="icon-rocket"></i>
                        &nbsp;&nbsp;<span>Test credentials</span>
                    </button>
                </div>
            </div>
        </div>
        <div class="panel-addon">
            <div data-bind="with: testConnectionResult">
                <div data-bind="compose: $root.backupDestinationTestCredentialsView"></div>
            </div>
        </div>
    </div>
</div>
<div data-bind="validationElement: destinationsChecked">
    <div class="help-block" data-bind="validationMessage: destinationsChecked"></div>
</div>
